<template>
    <view class="container">
        <view class="user">
            <!-- #ifdef MP-WEIXIN -->
                <view class="left">
                    <!-- 如果能获取存储的登录信息就数据库的昵称 -->
                    <view class="nickname" v-if="Object.keys(business).length>0" >
                        {{business.nickname ? business.nickname : business.mobile_text}}
                    </view>

                    <!-- 如果没有获取到就会显示微信昵称 -->
                    <open-data v-else type="userNickName" class="nickname"></open-data>
                </view>
                <view class="right">
                    <view class="avatar xcx">
                        <u-avatar :src="business.avatar_text" size="90" v-if="Object.keys(business).length>0"></u-avatar>

                        <!-- 如果没有获取到就会显示微信头像 -->
                        <open-data type="userAvatarUrl" v-else></open-data>
                    </view>
                </view>
            <!-- #endif -->
            <!-- H5 -->
			<!--  #ifdef H5 || APP-PLUS -->
            <view class="left">
                    <view class="nickname" v-if="Object.keys(business).length>0">
                        {{business.nickname}}
                    </view>
                    <view class="nickname" v-else>
                        请选登陆
                    </view>
                    <view class="email" v-if="Object.keys(business).length>0">
                        {{business.email}}
                    </view>
                </view>
                <view class="right">
                    <view class="avatar">
                        <u-avatar :src="business.avatar_text" size="90" v-if="Object.keys(business).length>0"></u-avatar>
                        <u-avatar src="/static/avatar.jpg" size="90" v-else></u-avatar>
                    </view>
                </view>
			<!-- #endif -->
        </view>

        <view class="menu" v-if="Object.keys(business).length>0">
            <view class="item" hover-class="checkActive" @click="ToProduct">
                <view class="title">产品防伪管理</view>
                <u-icon name="arrow-right"></u-icon>
            </view>
            <view class="item" v-if="business.openid" hover-class="checkActive" @click="UnbindAction()">
                <view class="title">解除绑定账号</view>
                <u-icon name="arrow-right"></u-icon>
            </view>
            <view class="item" hover-class="checkActive" @click="LogoutAction()">
                <view class="title">退出账号</view>
                <u-icon name="arrow-right"></u-icon>
            </view>
        </view>

        <view class="actions">
			<!-- #ifdef MP-WEIXIN -->
			<view class="login" v-if="Object.keys(business).length<=0">
				<u-button type="primary" icon="weixin-circle-fill" @click="onLogin">微信一键登陆</u-button>
			</view>
			<!-- #endif -->

			<!--  #ifdef H5 || APP-PLUS -->
			<view class="login" v-if="Object.keys(business).length<=0">
				<u-button type="primary" @click="toLogin">登陆帐号</u-button>
			</view>
			<!-- #endif -->
		</view>

        <u-toast ref="uToast"></u-toast>

        <u-modal :show="show" :content="content" :showCancelButton="true" @cancel="show = false" @confirm="onAction"></u-modal>
    </view>
</template>
<script>
export default{
    onShow(){
        this.business = uni.getStorageSync('business')?uni.getStorageSync('business'):{}
    },
    data() {
        return {
            business:{},
            show:false,//此状态判断是否打开
            content:'是否确认解绑',
            action:'logout',//logout 退出 unbind 解绑
        }
    },
    methods: {
        onLogin()
        { 
            /* //调用第三方登录接口  uni.login == weixin.login */
            uni.login({
                provider: 'weixin', //使用微信登录
                success: async (loginRes)=> {
                    /*//需要里面的code 登录凭证 loginRes.code */
                    var code = loginRes.code ? loginRes.code : 0;
                    if(!code){
                        this.$refs.uToast.show({
                            type:'error',
                            message:error.errMsg
                        })
                    }
                    //如果有的情况下发起请求
                    var result = await uni.$u.http.post('/business/WxLogin',{params:code})
                    if(result.code == 0){
                        this.$refs.uToast.show({
                            type:'error',
                            message:result.msg
                        })
                        return false
                    }
                    //action openid 根据action 的状态决定是否跳转bind
                    var action = result.data.action ? result.data.action : '';
                    console.log(action)
                    if(action == 'bind'){
                        this.$refs.uToast.show({
                            type:'success',
                            message:result.msg,
                            complete:()=>uni.$u.route({url:'pages/business/bind',params:{openid:result.data.openid}})//跳转路由的页面
                        })
                        return;//没有结束直接往下运行了;
                    }
                    //存入
                    uni.setStorageSync('business', result.data);
                    //刷新数据 重新刷新一下页面的business数据
                    this.business = result.data
                    this.$refs.uToast.show({
                        type:'success',
                        message:result.msg
                    })
                },
                fail: (error)=>{
                    this.$refs.uToast.show({
                        type:'error',
                        message:error.errMsg
                    })
                }
            });
        },
        toLogin()
        {
            this.$u.route('pages/business/login');
        },
        ToProduct()
        {
            this.$u.route('pages/business/list');
        },
        LogoutAction()
        {
            this.action = 'logout';
            this.show = true;
            this.content = '是否确认退出'
        },
        UnbindAction()
        {
            this.action = 'unbind';
            this.show = true;
            this.content = '是否确认解绑'
        },
        async onAction(){
            this.show = false;
            var msg = '退出成功';
            if(this.action == 'unbind'){
                 //解绑
                var result = await uni.$u.http.post('/business/onAction',{params:this.business.id})
                if(result.code==0){
                    this.$refs.uToast.show({
                        type:'error',
                        message:result.msg
                    })
                    return false;
                }
                msg = result.msg;
            }
            //退出就相当于把存入本地的数据删除掉 同步清理本地数据缓存。
            uni.clearStorageSync();
            this.business = {};
            this.$refs.uToast.show({
                type:'success',
                message:msg
            })
        }
    }
}
</script>

<style>
page{
    background-color: #eee;
}

.container{
    width: 95%;
    margin: 0 auto;
}

.user{
    display: flex;
    padding: 40px;
    background-color: #fff;
    margin-top: 10px;
    border-radius: 10px;
}

/* #ifdef H5  */
.user {
    align-items: center;
}
/* #endif */

.user .left {
    flex: 3;
}

/* 条件编译 */
/* #ifdef MP-WEIXIN  */
.user .left {
    flex: 3;
    display: flex;
    align-items: center;
    align-content: center;
}
/* #endif */


.user .right {
    flex: 1
}

.user .right .xcx {
    width: 200rpx;
    height: 200rpx;
    border-radius: 100%;
    overflow: hidden;
}

.user .left .nickname {
    font-size: 26px;
    font-weight: bold;
}

.actions {
    display: flex;
    padding: 20px 40rpx;
}

.login {
    flex: 1;
}

.menu{
    background-color: #fff;
    margin-top: 10px;
}

.menu .item{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    padding: 10px 10px;
    font-size: 14px;
}

.checkActive{
    background-color: rgba(233, 233, 233, 0.5);
}
</style>